<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import knowAPIRequest from '@/util/api/know'
	import { ref } from 'vue'
	import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
	
	// 视频详情
	const detail = ref<{name: string; content: Array<string>; updateTime: string}>({
		name: '',
		content: [],
		updateTime: '',
	})
	
	// 视频预览弹窗组件实例
	const videoPreviewPopupInstance = ref<InstanceType<typeof UniPopup> | null>(null)
	
	// 视频预览地址
	const videoPreviewUrl = ref('')
	
	/**
	 * 获取视频详情
	 * @param {String} id - 视频id
	 */
	const getDetail = async (id: string) => {
		uni.showLoading({
			title: '加载中',
			mask: true,
		})
		const res = await knowAPIRequest.getVideoDetail(id)
		uni.hideLoading()
		if (res.code === 20000) {
			detail.value = res.data.row
		}
	}
	
	/**
	 * 视频预览事件
	 * @param {String} videoUrl - 视频地址
	 */
	const handleVideoPreview = (videoUrl: string) => {
		if (videoPreviewPopupInstance.value) {
			videoPreviewUrl.value = videoUrl
			videoPreviewPopupInstance.value.open()
		}
	}
	
	onLoad((query: { id: string }) => {
		if (query && query.id) {
			getDetail(query.id)
		}
	})
</script>

<template>
	<view class="manual-detail-wrapper">
		<view class="name">{{ detail.name }}</view>
		<view class="update-time" v-if="detail.updateTime">更新时间：{{ detail.updateTime }}</view>
		<view class="video-list-wrapper">
			<view class="video-list">				
				<video
					v-for="(video, videoIndex) in detail.content"
					:key="videoIndex"
					:src="video"
					:controls="false"
					:enable-progress-gesture="false"
					:show-center-play-btn="false"
					@click="handleVideoPreview(video)"
					class="video"
				></video>
			</view>
		</view>
		
		<uni-popup ref="videoPreviewPopupInstance">
			<video :src="videoPreviewUrl" :enable-progress-gesture="false" :show-center-play-btn="false"></video>
		</uni-popup>
	</view>
</template>

<style>
	page {
		height: 100%;
	}
</style>

<style scoped lang="scss">	
	.manual-detail-wrapper {
		width: 100vw;
		height: 100%;
		padding: 24rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		row-gap: 10rpx;
		
		.name {
			text-align: center;
			font-weight: bold;
		}
		
		.update-time {
			text-align: center;
			color: #666;
		}
		
		.video-list-wrapper {
			flex: 1;
			height: 0;
			overflow: auto;
			
			.video-list {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				column-gap: 24rpx;
				row-gap: 24rpx;
				
				.video {
					width: 100%;
					height: 190rpx;
				}
			}
		}
	}
</style>
